拖动的实现 1

本节目标：理解“拖动的实现 1”的核心思路，并能把它用于实际开发或面试表达。 ==js 拖拽功能的实现== ==相关知识点：== ==首先是三个事件，分别是 mousedown，mousemove，mouseup====== ==当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行 mousemove 里面的具体方法。====== ==clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示====== ==元素的元素的初始坐标，移动的举例应该是：====== ==鼠标移动时候的坐标-鼠标按下去时候的坐标。====== ==也就是说定位信息为：====== ==鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.====== ==回答：== ==一个元素的拖拽过程，我们可以分为三个步骤，第一步是鼠标按下目标元素，第二步是鼠标保持按下的状态移动鼠标，第三步是鼠====== ==标抬起，拖拽过程结束。====== ==这三步分别对应了三个事件，mousedown 事件，mousemove 事件和 mouseup 事件。只有在鼠标按下的状态移动鼠标我们才会====== ==执行拖拽事件，因此我们需要在 mousedown 事件中设置一个状态来标识鼠标已经按下，然后在 mouseup 事件中再取消这个状====== ==态。在 mousedown 事件中我们首先应该判断，目标元素是否为拖拽元素，如果是拖拽元素，我们就设置状态并且保存这个时候鼠====== ==标的位置。然后在 mousemove 事件中，我们通过判断鼠标现在的位置和以前位置的相对移动，来确定拖拽元素在移动中的坐标。====== ==最后 mouseup 事件触发后，清除状态，结束拖拽事件。====== ==详细资料可以参考：== ==《原生 js 实现拖拽功能基本思路》== > 来自 <https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/JavaScript/JavaScript.md>